<script lang="ts" setup>
import { request } from '@/api'
import router from '@/router'
import { showToast } from 'vant'
import { onBeforeUnmount, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'

const show = ref(false)
const value = ref('')
onMounted(() => {
  value.value = useRoute().query.name as string
  window.updateUser = updateUser
})

// 在组件销毁前删除挂载到window上的方法，使用类型断言
onBeforeUnmount(() => {
  delete window.updateUser
})

const updateUser = async () => {
  show.value = true
  const res = await request.patch('v1_0/user/profile', { name: value.value })
  console.log('res----->', res.data)
  showToast({ message: '更新成功' })
  await mqm.updateUser()
  show.value = false
  router.back()
}
</script>

<template>
  <div>
    <span class="nickname">昵称</span>

    <!-- 可以使用 CellGroup 作为容器 -->
    <van-cell-group inset>
      <van-field v-model="value" placeholder="请输入用户名" class="textcontent" />
    </van-cell-group>
  </div>
</template>

<style lang="css" scoped>
.nickname {
  height: 47px;
  padding: 16px;
  /* background-color: red; */
}

.textcontent {
  text-align: center;
  background-color: var(--mqm-white);
  /* height: 44px; */
}
</style>
